<template>
  <div class="user">
    <van-row @click="loginModelShow">
      <van-col span="5">
        <img :src="avatarSrc" alt="" />
      </van-col>
      <van-col span="18">{{ nickname }}</van-col>
      <van-col span="1"><van-icon name="arrow" /></van-col>
    </van-row>
    <div class="login-model" v-if="loginShow">
      <section @click="loginModelShow"></section>
      <div class="login-model-form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="(value, index) in list"
        :key="index"
        :icon="value.icon"
        :text="value.text"
      />
    </van-grid>
  </div>
</template>
 
<script>
import { goLogin } from "@/request/api";
export default {
  name: "",
  data() {
    return {
      avatarSrc: require("@/assets/img/avatar.png"),
      username: "",
      password: "",
      loginShow: false,
      nickname: "点击登录",
      list: [
        { text: "我的订单", icon: "label-o" },
        { text: "优惠券", icon: "bill-o" },
        { text: "礼品卡", icon: "gift-card-o" },
        { text: "我的收藏", icon: "star-o" },
        { text: "我的足迹", icon: "flag-o" },
        { text: "会员福利", icon: "user-o" },
        { text: "地址管理", icon: "aim" },
        { text: "账号安全", icon: "warn-o" },
        { text: "联系客服", icon: "phone-o" },
        { text: "帮助中心", icon: "question-o" },
        { text: "意见反馈", icon: "smile-o" },
      ],
    };
  },
  methods: {
    loginModelShow() {
      this.loginShow = !this.loginShow;
    },
    // loginHidden() {
    //   this.loginShow = false;
    // },

    onSubmit(val) {
      // console.log(val);
      goLogin({
        username: val["用户名"],
        pwd: val["密码"],
      }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          let { token, userInfo } = res.data;
          localStorage.setItem("token", token);
          localStorage.setItem("newUserInfo", JSON.stringify(userInfo));

          this.nickname = userInfo.username;
          this.avatarSrc = userInfo.avatar;

          this.$toast.success("登录成功");
          this.loginModelShow();
        }
      });
    },
  },
  created() {
    //获取个人信息数据
    let token = localStorage.getItem("token");
    let newUserInfo = JSON.parse(localStorage.getItem("newUserInfo"));
    if (token) {
      this.nickname = newUserInfo.username;
      this.avatarSrc = newUserInfo.avatar;
    }
  },
  mounted() {},
};
</script>
 
<style lang="less" scoped>
.van-row {
  height: 1.3rem;
  background: #333;
  .van-col {
    line-height: 1.3rem;
    color: #fff;
    font-size: 0.17rem;
    img {
      // display: block;
      margin-left: 0.1rem;
      vertical-align: middle;
      width: 0.7rem;
      border-radius: 50%;
    }
  }
}
.login-model {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  section {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
  }
  .login-model-form {
    position: absolute;
    top: 50%;
    left: 50%;
    // margin: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    background: #fff;
  }
}
</style>